<template>
  <div class="topSelect" @click.stop="closeTooltips">
    <div class="topSelectList">
      <div class="topSelectLabel">
        <span class="name">岗位类型</span>
        <span class="name">工作地点</span>
      </div>
      <div class="topSelectContainer">
        <div class="civilTypeFilter">
          <div
            :class="{
              civilTypeItem: true,
              active: selectedCivilValue == item.value,
            }"
            v-for="(item, index) in civilTypeList"
            :key="index"
            @click="handleCivilTypeSelect(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="jobRegionCheckbox">
          <el-checkbox-group
            class="jobRegionCheckboxGroup"
            v-model="jobFilterDisplayData['regionId']"
            :class="{ optionsBox: true }"
            @change="handleCheckboxChange"
            :min="1"
          >
            <el-checkbox
              :label="item.value + '-' + item.label"
              v-for="(item, index) in currentRegionList"
              :key="index"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
          <el-tooltip
            placement="bottom"
            effect="light"
            popper-class="filterTooltipsContainer"
            v-show="currentRegionList.length > 12"
          >
            <div slot="content">
              <div class="TooltipsContent">
                <el-checkbox-group
                  class="TooltipsRegionCheckboxGroup"
                  v-model="jobFilterDisplayData['regionId']"
                  :class="{ optionsBox: true }"
                  @change="handleCheckboxChange"
                  :min="1"
                >
                  <el-checkbox
                    :label="item.value + '-' + item.label"
                    v-for="(item, index) in currentRegionList"
                    :key="index"
                    >{{ item.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
            <span class="regionTooltipsElement">其他地区</span>
          </el-tooltip>
        </div>
      </div>
    </div>

    <div class="jobFilterList" v-if="showYearList">
      <div
        class="jobFilterItem"
        :class="{
          jobFilterItem: true,
          active:
            jobFilterDisplayData[item.prop] &&
            jobFilterDisplayData[item.prop].length > 0,
        }"
        v-for="(item, index) in jobFilterList"
        :key="item.prop"
      >
        <el-tooltip
          placement="bottom"
          effect="light"
          v-if="item.options.length"
          popper-class="filterTooltipsContainer"
        >
          <div slot="content">
            <div class="jobFilterItemTooltipsContent TooltipsContent">
              <el-checkbox-group
                :class="[
                  'jobFilterItemTooltipCheckboxGroup',
                  'TooltipsRegionCheckboxGroup',
                  'optionsBox',
                  item.prop,
                ]"
                v-model="jobFilterDisplayData[item.prop]"
                @change="(e) => handleFilterCheckboxChange(e, item.prop)"
              >
                <el-checkbox
                  :label="_item.value"
                  v-for="(_item, _index) in item.options"
                  :key="_index"
                  >{{ _item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
          <div class="jobFilterItemLabel">
            <span>{{
              jobFilterDisplayData[item.prop] &&
              jobFilterDisplayData[item.prop].length > 0
                ? `${item.label}(${
                    jobFilterDisplayData[item.prop] &&
                    jobFilterDisplayData[item.prop].length
                  })`
                : item.label
            }}</span>
            <i class="el-icon-arrow-down arrow"></i>
          </div>
        </el-tooltip>
      </div>
      <!-- <div class="jobFilterItem" :class="{
              jobFilterItem: true,
              active: jobFilterDisplayData['date']&&jobFilterDisplayData['date'].length > 0
            }" v-if="selectedCivilValue!==1">
        <el-tooltip placement="bottom" effect="light" popper-class="filterTooltipsContainer">
          <div slot="content">
            <div class="jobFilterItemTooltipsContent TooltipsContent">
              <el-date-picker v-model="jobFilterDisplayData['date']" type="daterange" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="yyyy-MM-dd" :default-time="['00:00:00', '23:59:59']"
                @change="handleDateChange">
              </el-date-picker>
            </div>
          </div>
          <div class="jobFilterItemLabel">
            <span>{{ jobFilterDisplayData['date']&&jobFilterDisplayData['date'].length > 0 ? `报名时间(1)` : "报名时间" }}</span>
            <i class="el-icon-arrow-down arrow"></i>
          </div>
        </el-tooltip>
      </div> -->
    </div>
  </div>
</template>
<script>
import {
  getCivilYear,
  getCivilTeacherYearOptions,
  getCivilTeacherRegionOptions,
} from "@/api/civil-job";
import {
  educationList,
  politicalStatusList,
  recruitmentStatus,
} from "@/utils/jobFilterData.js";
import { provinceList } from "@/utils/provinceData.js";
export default {
  name: "civilJobFilter",
  data() {
    return {
      recruitmentStatus,
      selectedCivilValue: 1,
      civilTypeList: [
        {
          name: "国家公务员",
          value: 1,
        },
        {
          name: "教师招聘",
          value: 2,
        },
        {
          name: "特岗教师",
          value: 3,
        },
        {
          name: "事业单位",
          value: 4,
        },
      ],
      provinceList,
      currentRegionList: [],
      tooltipsVisible: true,
      currentClassList: [],
      // 下面这里要有两个Data，一个是用来显示d的，一个是用来存储的，如果共用同一个会有触发问题
      // 如果在这里加了字段，还要在index里面加
      jobFilterData: {
        politicalStatus: [],
        edu: [],
        year: [],
        regionId: ["100000-全国"],
        civilType: [1],
        recruitmentStatus: [],
        date: [],
      },
      jobFilterDisplayData: {
        politicalStatus: [],
        edu: [],
        year: [],
        regionId: ["100000-全国"],
        civilType: [1],
        recruitmentStatus: [],
        date: [],
      },
      jobFilterList: [
        {
          label: "政治面貌",
          options: politicalStatusList,
          prop: "politicalStatus",
        },
        { label: "学历要求", options: educationList, prop: "edu" },
        { label: "岗位年份", options: [], prop: "year" },
      ],
      showYearList: false,
      civilYearOptions: [],
      teacherYearOptions: [],
      civilRegionOptions: [],
      teacherRegionOptions: [],
    };
  },
  computed: {
    regionId() {
      return this.$store.state.user.regionId;
    },
  },
  created() {
    this.civilRegionOptions = [
      {
        value: "100000",
        label: "全国",
      },
      ...this.provinceList,
    ];
    //默认进来是国家公务员tab
    this.currentRegionList = this.civilRegionOptions;
    this.getCivilYearFn();
  },
  mounted() {
    //一开始设置选中地图的默认值
    const extra = localStorage.getItem("extra");
    const extraData = JSON.parse(extra || {});
    let regionName = "";
    if (extraData.regionName) {
      regionName = extraData.regionName.replace("省", "");
    }
    if (this.regionId && regionName) {
      var regionIdArr = [this.regionId + "-" + regionName];
    } else {
      var regionIdArr = [
        this.civilRegionOptions[0].value +
          "-" +
          this.civilRegionOptions[0].label,
      ];
    }
    this.jobFilterData["regionId"] = regionIdArr;
    this.jobFilterDisplayData["regionId"] = regionIdArr;
  },
  methods: {
    handleDateChange(val) {
      this.jobFilterData["date"] = val;
      this.$emit("selectedCivilJobChecks", this.jobFilterData);
    },
    handleCivilTypeSelect(item) {
      this.selectedCivilValue = item.value;
      this.jobFilterData = this.$options.data().jobFilterData;
      this.jobFilterDisplayData = this.$options.data().jobFilterDisplayData;
      if (item.value == 1) {
        this.jobFilterList = [
          {
            label: "政治面貌",
            options: politicalStatusList,
            prop: "politicalStatus",
          },
          { label: "学历要求", options: educationList, prop: "edu" },
          { label: "岗位年份", options: this.civilYearOptions, prop: "year" },
        ];
        this.currentRegionList = this.civilRegionOptions;
        this.jobFilterData["year"] = [this.civilYearOptions[0].value];
        this.jobFilterDisplayData["year"] = [this.civilYearOptions[0].value];
        //国家公务员的时候设置默认值
        const extra = localStorage.getItem("extra");
        const extraData = JSON.parse(extra || {});
        console.log("extraData", extraData);
        let regionName = "";
        if (extraData.regionName) {
          regionName = extraData.regionName.replace("省", "");
        }
        if (this.regionId && regionName) {
          var regionIdArr = [this.regionId + "-" + regionName];
        } else {
          var regionIdArr = [
            this.civilRegionOptions[0].value +
              "-" +
              this.civilRegionOptions[0].label,
          ];
        }
        this.jobFilterData["regionId"] = regionIdArr;
        this.jobFilterDisplayData["regionId"] = regionIdArr;
      } else {
        this.getCivilTeacherYearOptionsFn();
        this.getCivilTeacherRegionOptionsFn();
        setTimeout(() => {
          this.jobFilterList = [
            {
              label: "岗位年份",
              options: this.teacherYearOptions,
              prop: "year",
            },
          ];
        }, 500);
      }
      this.jobFilterData["civilType"] = [this.selectedCivilValue];
      this.$emit("selectedCivilJobChecks", this.jobFilterData);

      //埋点
      this.handleCivilTypeChangeReport(item.value);
    },
    handleCivilTypeChangeReport(civilType) {
      console.log("civilType", civilType);

      switch (civilType) {
        case 1:
          this.$bus.$emit("generalReportAction", {
            etId: 40040,
            personId: localStorage.getItem("personId"),
            cardType: localStorage.getItem("cardType"),
            jumpSource: 60,
            sourceType: 60,
          });
          break;
        case 2:
          this.$bus.$emit("generalReportAction", {
            etId: 40041,
            personId: localStorage.getItem("personId"),
            cardType: localStorage.getItem("cardType"),
            jumpSource: 60,
            sourceType: 60,
          });
          break;
        case 3:
          this.$bus.$emit("generalReportAction", {
            etId: 40042,
            personId: localStorage.getItem("personId"),
            cardType: localStorage.getItem("cardType"),
            jumpSource: 60,
            sourceType: 60,
          });
          break;
        case 4:
          this.$bus.$emit("generalReportAction", {
            etId: 40043,
            personId: localStorage.getItem("personId"),
            cardType: localStorage.getItem("cardType"),
            jumpSource: 60,
            sourceType: 60,
          });
          break;

        default:
          break;
      }
    },
    async getCivilYearFn() {
      const res = await getCivilYear();
      if (res.code == 200) {
        if (res.data.length <= 0) return;
        const temp = [];
        res.data.forEach((item) => {
          temp.push({ label: item.year, value: item.year });
        });
        this.civilYearOptions = temp.slice(0, 5);
        this.jobFilterList[2].options = this.civilYearOptions;
        this.jobFilterData["year"] = [temp[0].value];
        this.jobFilterDisplayData["year"] = [temp[0].value];
        this.$emit("getYears", this.civilYearOptions);
        this.$emit("selectedCivilJobChecks", this.jobFilterData);
        this.showYearList = true;
      }
    },
    async getCivilTeacherYearOptionsFn() {
      const res = await getCivilTeacherYearOptions({
        noticeType: this.selectedCivilValue,
      });
      if (res.code == 200) {
        if (res.data.length <= 0) return;
        const temp = [];
        res.data.forEach((item) => {
          temp.push({ label: item.year, value: item.year });
        });
        this.teacherYearOptions = temp.slice(0, 5);
        //设置默认值
        this.jobFilterData["year"] = [this.teacherYearOptions[0].value];
        this.jobFilterDisplayData["year"] = [this.teacherYearOptions[0].value];
      }
    },
    async getCivilTeacherRegionOptionsFn() {
      const res = await getCivilTeacherRegionOptions({
        noticeType: this.selectedCivilValue,
      });
      if (res.code == 200) {
        if (res.data.length <= 0) return;
        this.teacherRegionOptions = res.data.map((item, index) => {
          const regionName = this.getRegionNameByRegionId(item.regionId);
          return { label: regionName, value: item.regionId };
        });
        this.teacherRegionOptions.unshift({ label: "全国", value: "" });
        //除国家公务员外的设置默认值
        this.currentRegionList = this.teacherRegionOptions;
        const extra = localStorage.getItem("extra");
        const extraData = JSON.parse(extra || {});
        let regionName = "";
        if (extraData.regionName) {
          regionName = extraData.regionName.replace("省", "");
        }
        if (this.regionId && regionName) {
          var regionIdArr = [this.regionId + "-" + regionName];
        } else {
          var regionIdArr = [
            this.teacherRegionOptions[0].value +
              "-" +
              this.teacherRegionOptions[0].label,
          ];
        }
        this.jobFilterData["regionId"] = regionIdArr;
        this.jobFilterDisplayData["regionId"] = regionIdArr;
      }
    },
    getRegionNameByRegionId(regionId) {
      const target = this.provinceList.find((item, index) => {
        if (item.value == regionId) {
          return true;
        }
      });
      return target?.label;
    },
    closeTooltips() {
      this.currentClassList.forEach((item) => {
        item.isShowTooltip = false;
      });
      this.secondSelectedItem = {};
    },
    handleFilterCheckboxChange(value, prop) {
      this.jobFilterData[prop] = [];
      this.jobFilterDisplayData[prop] = [];
      if (value && value.length) {
        this.jobFilterData[prop][0] = value[value.length - 1];
        this.jobFilterDisplayData[prop][0] = value[value.length - 1];
      }
      this.$emit("selectedCivilJobChecks", this.jobFilterData);
    },
    handleCheckboxChange(value) {
      this.jobFilterData["regionId"] = [];
      this.jobFilterDisplayData["regionId"] = [];
      if (value && value.length) {
        this.jobFilterData["regionId"][0] = value[value.length - 1];
        this.jobFilterDisplayData["regionId"][0] = value[value.length - 1];
      }
      this.$emit("selectedCivilJobChecks", this.jobFilterData);
    },
  },
};
</script>

<style lang="scss" scoped>
.topSelect {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 60px;
  margin: 0 14px 12px;
  padding: 16px 28px;
  // padding-right: 70px;
  background: linear-gradient(180deg, #d0e3ff 0%, #f1f4f9 50%);
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.26);
  z-index: 4;
  width: calc(100% - 28px);
  .topSelectList {
    display: flex;
    .topSelectLabel {
      flex: 0 0 80px;
      font-size: 17px;
      display: flex;
      flex-direction: column;
      margin: 0 4px 0 0;
      align-items: center;
      justify-content: center;
      border-right: 3px solid #c8d4e6;
      border-radius: 1px;
      padding-right: 15px;
      .name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 14px;
        color: #222222;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        &:first-of-type {
          margin-bottom: 12px;
        }
      }
    }
    .topSelectContainer {
      width: 100%;
      padding-left: 29px;
      .civilTypeFilter {
        display: flex;
        margin-bottom: 12px;
        .civilTypeItem {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #555555;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          margin-right: 24px;
          cursor: pointer;
          &.active {
            color: #0b6eff;
            background: #cadfff;
            border-radius: 3px;
            padding: 0 11px;
          }
        }
      }
      .jobRegionCheckbox {
        display: flex;
        .jobRegionCheckboxLabel {
          height: 20px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #222222;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          margin-right: 24px;
        }
        .jobRegionCheckboxGroup {
          // max-width: calc(100% - 254px);
          max-width: calc(100% - 87px);
          max-height: 19px;
          overflow: hidden;
        }
        .regionTooltipsElement {
          height: 20px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #555555;
          line-height: 20px;
          cursor: pointer;
          display: flex;
          align-items: center;
          margin-left: 12px;

          background-color: #cadfff;
          padding: 4px 8px;
          border-radius: 4px;
          color: #0b6eff;
          .arrow {
            color: #bbbbbb;
            margin-left: 8px;
          }
        }
      }
    }
  }
  .jobFilterList {
    margin-top: 14px;
    display: flex;
    .jobFilterItem {
      background: #e3e9f3;
      border-radius: 4px;
      padding: 5px 8px;
      margin-right: 24px;
      cursor: pointer;
      .jobFilterItemLabel {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #555555;
        text-align: left;
        font-style: normal;
        display: flex;
        align-items: center;
        .arrow {
          color: #bbbbbb;
          margin-left: 8px;
        }
      }
      &.active {
        background: #cadfff;
        .jobFilterItemLabel {
          color: #0b6eff;
          .arrow {
            color: #0b6eff;
          }
        }
      }
    }
  }
}
// 最外面的容器的代码在index.scss中
.el-tooltip__popper {
  background: #fcfcfc;
  box-shadow: 0px 0px 26px 0px rgba(178, 181, 203, 0.5);
  border-radius: 8px;
}
.TooltipsContent {
  max-width: 373px;
  padding: 0 10px;
  .TooltipsRegionCheckboxGroup {
    ::v-deep .el-checkbox {
      min-width: auto;
      margin: 4px 0;
      margin-right: 14px;
    }
  }
  .politicalStatus {
    width: 84px;
  }
  .edu {
    width: 94px;
  }
  .year {
    width: 74px;
  }
}
::v-deep .el-checkbox {
  font-weight: 400;
  .el-checkbox__inner {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background-color: transparent;
    border: 1px solid #9ea9c1;
  }
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: transparent;
  }
  .el-checkbox__input.is-focus .el-checkbox__inner {
    background-color: transparent;
    border-color: #dcdfe6;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: transparent;
    border-color: #409eff;
  }
  .el-checkbox__inner::after {
    left: 3px;
    height: 5px;
    width: 3px;
    border: 1px solid #409eff;
    border-left: 0;
    border-top: 0;
  }
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    left: 3px;
    height: 5px;
    width: 3px;
    border: 1px solid #409eff;
    border-left: 0;
    border-top: 0;
    border-color: #409eff;
  }
}
::v-deep .el-checkbox__label {
  height: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #555555;
  line-height: 20px;
  text-align: left;
  font-style: normal;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #409eff;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__inner {
  color: #9ea9c1;
}
</style>
